

import { Tooltip } from 'antd';
import React, { createElement, useEffect, useState } from 'react'
import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
import "./ShowVideoLikes.scss";
import { httpUpdataVideoDislikes, httpUpdataVideoLikes } from '../../apis';

export default function ShowVideoLikes({video}) {
    const [likes,setLikes] = useState(video.likes);
    const [dislikes,setDislikes] = useState(video.dislikes);
    const [action,setAction] = useState(null);
    useEffect(()=>{
        setLikes(video.likes);
        setDislikes(video.dislikes);
    },[video.likes,video.dislikes]);

    const like = async () => {
        if(action==="liked")return ;
        setLikes(likes+1);
        let data = {};
        data.likes = likes + 1;
        data.videoId = video.videoId;
        await httpUpdataVideoLikes(data);
        if(action) {
            setDislikes(dislikes-1);
            data.dislikes = dislikes - 1;
            await httpUpdataVideoDislikes(data);
        }
        setAction('liked');
    };

    const dislike = async () => {
        if(action==="disliked")return ;
        setDislikes(dislikes+1);
        let data = {};
        data.dislikes = dislikes + 1;
        data.videoId = video.videoId;
        await httpUpdataVideoDislikes(data);
        if(action) {
            setLikes(likes-1);
            data.likes = likes - 1;
            await httpUpdataVideoLikes(data);  
        }
        setAction('disliked');
    };
    return (
        <div className='ShowVideoLikes-container'>
            <Tooltip key="comment-basic-like">
                <div onClick={like} className="l-btn">
                    {
                        action === 'liked' ?
                        <LikeFilled style={{
                            fontSize: "2rem"
                        }}></LikeFilled>:
                        <LikeOutlined style={{
                            fontSize: "2rem"
                        }}></LikeOutlined>
                    }
                    <span className="comment-action">{likes}</span>
                </div>
            </Tooltip>
            <Tooltip key="comment-basic-dislike">
                <div onClick={dislike} className="l-btn">
                    {
                        action === 'disliked' ?
                        <DislikeFilled style={{
                            fontSize: "2rem"
                        }}></DislikeFilled>:
                        <DislikeOutlined style={{
                            fontSize: "2rem"
                        }}></DislikeOutlined>
                    }
                    <span className="comment-action">{dislikes}</span>
                </div>
            </Tooltip>
        </div>
    )
}
